<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    .hezi1{
        width:100%;
        height:50px;
        background-color:white;
    }
    .hezi2{
        height: 64px;
        display: flex;
        align-items: center;
    }
    .hezi3{
        padding-left: 900px;
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 16px;
    }
    .hezi4{
        width:100%;
        height:400px;
        background-color: white;
    }
    .hezi4a{
        padding-left: 700px;
        padding-top: 100px;
        font-size: 32px;
        font-weight: normal;
        margin: 0 0 24px 0;
    }
    .hezi4b{
        font-size: 20px;
        opacity: .76;
        max-width: 80%;
        padding-left:650px;
    }
    .hezi4c{
        padding-top: 80px;
        padding-left: 800px;
    }
    .hezi5{
        width:100%;
        height:700px;
        background-color: azure;
    }
    .hezi5a{
        padding-top: 80px;
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi5b{
        color: #7e96b3;
        padding-top: 10px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi5c{
        padding-left: 500px;
    }
    .hezi6{
        width:100%;
        height:700px;
        background-color: white;
    }
    .hezi6a{
        padding-top: 80px;
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi6b{
        color: #7e96b3;
        padding-top: 30px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi6c{
        padding-left: 300px;
    }
    .hezi7{
        width:100%;
        height:700px;
        background-color: white;
    }
    .hezi7a{
        padding-top: 80px;
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi7b{
        color: #7e96b3;
        padding-top: 20px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi7c{
        padding-left: 450px;
    }
    .hezi8{
        width:100%;
        height:900px;
        background-color: white;
    }
    .hezi8a{
        padding-top: 80px;
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi8b{
        color: #7e96b3;
        padding-top: 20px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi8c{

        padding-left: 400px;
    }
    .hezi9{
        width:100%;
        height:500px;
        background-color: azure;
    }
    .hezi9a{
        padding-top: 80px;
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi9b{
        color: #7e96b3;
        padding-top: 20px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi10{
        float:left;
        margin-left: 400px;
        font-size: 16px;
        color:white;
        width:500px;
        height: 200px;
        background-color: black;
    }
    .hezi11{
        float:right;
        margin-right: 400px;
        font-size: 16px;
        color:white;
        width:500px;
        height: 200px;
        background-color: black;
    }
    .hezi9c{
        color: #7e96b3;
        float: left;
        margin-top: 0px;
        padding-left: 400px;
        font-size: 16px;
        max-width: 60%;
        text-align: center;
    }
    .hezi9d{
        color: #7e96b3;
        float:right;
        margin-top: 0px;
        padding-right: 665px;
        font-size: 16px;
        max-width: 60%;
        text-align: center;
    }
    .hezi12{
        width:100%;
        height:850px;
        background-color: white;
    }
    .hezi12a{
        color: #1a73e8;
        font-weight: normal;
        font-size: 32px;
        text-align: center;
        margin: 0;
    }
    .hezi12b{
        color: #7e96b3;
        padding-top: 20px;
        font-size: 20px;
        max-width: 60%;
        margin: 16px auto 56px auto;
        text-align: center;
    }
    .hezi12c{
        margin-top: -30px;
        margin-left: 400px;
    }
    .hezi13{
        width:100%;
        height:600px;
        background-color: white;
    }
    .hezi13c{
        margin-left: 400px;
    }
    .hezi14{
        width:100%;
        height:600px;
        background-color: white;
    }
    .hezi15{
        width:100%;
        height:800px;
        background-color: white;
    }
    .hezi15c{
        color: white;
        float:right;
        margin-right: 400px;
        font-size: 16px;
        width:500px;
        height: 600px;
        background-color: black;
    }
    .hezi15d{
        float:left;
        margin-left: 450px;
    }
    .hezi16{
        width:100%;
        height:700px;
        background-color: white;
    }
    .hezi16c{
        margin-left: 400px;
    }
.hezi17{
        width: 100%;
        height:500px;
        background-color: dimgray;
    }
    .hezi17a{
        float:left;
        width:100px;
        height:200px;

        margin-left: 500px;
        margin-top: 10px;
    }
    .hezi17b{
        color:white;
        font-size: 16px;
        padding-top: 30px;
    }
    .hezi17c{
        color: #7e96b3;
        text-decoration: none;
        transition: color .2s;
    }
    .hezi17d{
        float:left;
        width:150px;
        height:150px;

        margin-left: 150px;
        margin-top: 10px;
    }
    .hezi17e{
        float:left;
        width:400px;
        height:150px;

        margin-left: 150px;
        margin-top: 10px;
    }
    .hezi17f{
        float:left;
        margin-top: 10px;
        margin-left: 450px;
    }
    .hezi17g{
         float:left;
         margin-top: 10px;
         margin-left: 30px;
     }
    .logo{
        padding-left: 450px;
        display: flex;
        align-items: center;
        height: 100%;
        color: #1a73e8;
        text-decoration: none;
        font-size: 22px;
    }
    a{
        color: #7e96b3;
        text-decoration: none;
        transition: color .2s;
    }
    </style>
</head>
<body>
<div class="hezi1">
    <header class="hezi2">
        <div class="logo">
            MDClub
        </div>
        <div class="hezi3">
            <a href="#">
                文档&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </a>

            <a href="#">
                社区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
            <a href="#">
                Github
            </a>
        </div>
    </header>
</div>
<div class="hezi4">
    <div class="hezi4a">
        更好用的现代化开源论坛系统
    </div>
    <div class="hezi4b">
        MDClub 漂亮、轻量且好用，它能让在线讨论变得更加轻松愉悦
    </div>
    <div class="hezi4c">
        <a href="#"><img src="src/1.png"></a>
        &nbsp;&nbsp;
        <a href="#"><img src="src/2.png"></a>
    </div>
</div>
<div class="hezi5">
    <div class="hezi5a">
        Material Design 设计语言
    </div>
    <div class="hezi5b">
        得益于优秀的 MDUI 框架，使得 MDClub 的 UI 层次分明，动画流畅
    </div>
    <div class="hezi5c">
        <img src="src/3.webp" width="800px" height="400px">
    </div>
</div>
<div class="hezi6">
    <div class="hezi6a">
        响应式设计
    </div>
    <div class="hezi6b">
        从小屏手机，到大屏桌面显示器，都能自动适配
    </div>
    <div class="hezi6c">
        <img src="src/4.webp" width="800" height="400">
        <img src="src/5.png" >
    </div>
</div>
<div class="hezi7">
    <div class="hezi7a">
     超级轻量级
    </div>
    <div class="hezi7b">
        使用了轻量的 MDUI 框架，即使在慢速网络下，也能迅速加载
    </div>
    <div class="hezi7c">
        <img src="src/6.png">
    </div>
</div>
<div class="hezi8">
    <div class="hezi8a">
        自动适配暗色模式
    </div>
    <div class="hezi8b">
        根据操作系统的主题，自动切换亮色主题和暗色主题
    </div>
    <div class="hezi8c">
        <img src="src/7.png">
    </div>
</div>
<div class="hezi9">
    <div class="hezi9a">
        单页面应用，且完美支持 SEO
    </div>
    <div class="hezi9b">
        首屏由服务端输出，次屏通过 Ajax 加载，兼顾了 SEO 和用户体验
    </div>

    <div class="hezi10">
        &lt;!DOCTYPE html><br>
        &lt;html><br>
        &nbsp;&nbsp;&lt;head><br>
        &nbsp;&nbsp;&nbsp;&lt;title>MDClub</title><br>
        &nbsp;&nbsp;&lt;/head><br>
        &lt;body><br>
        &nbsp;&nbsp;&lt;p>自豪地使用 MDClub&lt;/p><br>
        &lt;/body><br>
        &lt;/html>
    </div>
    <div class="hezi11">
        {<br>
        "code": 0,<br>
        "data": {<br>
        "question_id: 1,<br>
        "user_id": 10000,<br>
        "title": "MDClub 的第一个提问",<br>
        ......<br>
        }<br>
        }
    </div>
    <div class="hezi9c">
        首屏由服务端输出完整 HTML 页面
    </div>
    <div class="hezi9d">
        次屏仅输出 JSON，由客户端渲染
    </div>
</div>
<div class="hezi12">
    <div class="hezi12a">
        定制的富文本编辑器
    </div>
    <div class="hezi12b">
        使用了自主开发的富文本编辑器，和系统完美兼容
    </div>
    <div class="hezi12c">
        <img src="src/8.png">
    </div>
</div>
<div class="hezi13">
    <div class="hezi12a">
        方便安装
    </div>
    <div class="hezi12b">
        无需具备任何编程知识，30秒完成安装
    </div>
    <div class="hezi13c">
        <img src="src/9.png">
    </div>
</div>
<div class="hezi14">
    <div class="hezi12a">
        强大的 Restful API 接口
    </div>
    <div class="hezi12b">
        应用的所有功能都通过 200 多个 Restful API 开放
    </div>
    <div class="hezi13c">
        <img src="src/10.png">
    </div>
</div>
<div class="hezi15">
    <div class="hezi12a">
        OpenAPI 规范的文档
    </div>
    <div class="hezi12b">
        API 文档完全使用 OpenAPI 规范，拥有庞大的 OpenAPI 生态资源
    </div>
    <div class="hezi15d">
        <img src="src/11.png">
    </div>
    <div class="hezi15c">
        openapi: 3.0.2<br>
        info:<br>
        title: MDClub API<br>
        description: MDClub 是一个 Material Design 风格的社区应用<br>
        version: 1.0.0<br>
        servers:<br>
        - url: /api<br>
        description: 当前服务器<br>
        paths:<br>
        /questions:<br>
        get:<br>
        summary: 获取提问列表<br>
        parameters:<br>
        - $ref: '#/components/parameters/page'<br>
        - $ref: '#/components/parameters/per_page'<br>
        - $ref: '#/components/parameters/order.questions'<br>
        - $ref: '#/components/parameters/include.question'<br>
        - $ref: '#/components/parameters/question_id.query'<br>
        - $ref: '#/components/parameters/user_id.query'<br>
        - $ref: '#/components/parameters/topic_id.query'<br>
        - $ref: '#/components/parameters/trashed.query'<br>
        responses:<br>
        '200':<br>
        $ref: '#/components/responses/Questions'<br>
        default:<br>
        $ref: '#/components/responses/Error'
    </div>
</div>
<div class="hezi16">
    <div class="hezi5a">
    多平台 JavaScript SDK
    </div>
    <div class="hezi5b">
        提供了 JavaScript SDK，可用于多个 JS 框架，及多种小程序平台
    </div>
    <div class="hezi16c">
        <img src="src/12.png">
    </div>
</div >
<div class="hezi17">
    <div class="hezi17a">
        <div class="hezi17b">社区</div><br><br>
        <div class="hezi17c"><a href="#">MDClub社区</a></div><br><br>
        <div class="hezi17c"><a href="#">Github issue</a></div>
    </div>
    <div class="hezi17d">
        <div class="hezi17b">资源</div><br><br>
        <div class="hezi17c"><a href="#">MDUI 前段架构</a></div>
    </div>
    <div class="hezi17e">
        <div class="hezi17b">赞助该项目</div><br><br>
        <div class="hezi17c">MDClub 是一个基于 MIT 协议的开源项目，你可以通过捐赠的形式来帮助发展该项目</div>
    </div>
    <div class="hezi17f">
        <img src="src/14.webp" width="80%" height="80%">
    </div>
    <div class="hezi17g">
        <img src="src15.webp" width="80%" height="80%">
    </div>
</div>
</body>
</html>